import QtQuick
import FluentUI
import QtQuick.Controls
import QtQuick.Layouts

FluRectangle {
    width: mainWindow.width * 0.81
    height: mainWindow.height * 0.8
    color: "transparent"

    GridLayout {
        anchors.fill: parent
        columns: 3
        rows: 3
        columnSpacing: parent.width * 0.03
        rowSpacing: parent.height * 0.03

        FluRectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "#FFFFFF"
            Layout.row: 0
            Layout.column: 0
            radius: [25, 25, 25, 25]

            Row {
                anchors.fill: parent
                //占位Rectangle
                Rectangle {
                    width: parent.width * 0.08
                    height: parent.width * 0.08
                    color: "transparent"
                }
                FluImage {
                    y: parent.width * 0.08
                    height: parent.height * 0.25
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/image/image/MockInterViewFuncIcon.png"
                }
                //占位Rectangle
                Rectangle {
                    width: parent.width * 0.04
                    height: parent.width * 0.08
                    color: "transparent"
                }
                Text {
                    y: parent.width * 0.10
                    text: "基础面试"
                    font.pointSize: 12 * fontSizeFactor
                    font.family: "MiSans"
                    color: "#0A1629"
                }
            }

            Text {
                x: parent.width * 0.08
                y: parent.width * 0.3
                text: "考察八股文，检测基础是否牢固"
                font.pointSize: 9 * fontSizeFactor
                font.family: "MiSans"
                color: "#7D8592"
            }

            // 开始按钮
            Rectangle {
                id: mockInterviewRect
                y: parent.height * 0.7
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width * 0.84
                height: parent.height * 0.2
                radius: 10
                color: "#FFFFFF"
                border.width: 1
                border.color: "#0A1629"

                Text {
                    anchors.centerIn: parent
                    text: "---->> Go"
                    font.pointSize: 12 * fontSizeFactor
                    font.family: "MiSans"
                    color: "#0A1629"
                }

                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: {
                        mockInterviewRect.scale = 1.15
                    }
                    onExited: {
                        mockInterviewRect.scale = 1.0
                    }
                    onPressedChanged: {
                        FluRouter.navigate("/interview");
                        mainWindow.close();
                    }
                }
                // Q弹动画
                Behavior on scale {
                    PropertyAnimation {
                        duration: 200
                        easing.type: Easing.OutBounce
                    }
                }
            }
        }

        FluRectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "#FFFFFF"
            Layout.row: 0
            Layout.column: 1
            radius: [25, 25, 25, 25]

            Row {
                anchors.fill: parent
                //占位Rectangle
                Rectangle {
                    width: parent.width * 0.08
                    height: parent.width * 0.08
                    color: "transparent"
                }
                FluImage {
                    y: parent.width * 0.08
                    height: parent.height * 0.25
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/image/image/RaiseInterviewIcon.png"
                }
                //占位Rectangle
                Rectangle {
                    width: parent.width * 0.04
                    height: parent.width * 0.08
                    color: "transparent"
                }
                Text {
                    y: parent.width * 0.10
                    text: "提高面试"
                    font.pointSize: 12 * fontSizeFactor
                    font.family: "MiSans"
                    color: "#0A1629"
                }
            }

            Text {
                x: parent.width * 0.08
                y: parent.width * 0.3
                text: "综合考察掌握的知识"
                font.pointSize: 9 * fontSizeFactor
                font.family: "MiSans"
                color: "#7D8592"
            }

            // 开始按钮
            Rectangle {
                id: raiseInterviewRect
                y: parent.height * 0.7
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width * 0.84
                height: parent.height * 0.2
                radius: 10
                color: "#FFFFFF"
                border.width: 1
                border.color: "#0A1629"

                Text {
                    anchors.centerIn: parent
                    text: "--> Start <--"
                    font.pointSize: 12 * fontSizeFactor
                    font.family: "MiSans"
                    color: "#0A1629"
                }

                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: {
                        raiseInterviewRect.scale = 1.15
                    }
                    onExited: {
                        raiseInterviewRect.scale = 1.0
                    }
                    onPressedChanged: {
                        FluRouter.navigate("/interview");
                        mainWindow.close();
                    }
                }
                // Q弹动画
                Behavior on scale {
                    PropertyAnimation {
                        duration: 200
                        easing.type: Easing.OutBounce
                    }
                }
            }
        }

        // 综合面试
        FluRectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "#FFFFFF"
            Layout.row: 0
            Layout.column: 2
            radius: [25, 25, 25, 25]

            Row {
                anchors.fill: parent
                //占位Rectangle
                Rectangle {
                    width: parent.width * 0.08
                    height: parent.width * 0.08
                    color: "transparent"
                }
                FluImage {
                    y: parent.width * 0.08
                    height: parent.height * 0.25
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/image/image/ComprehensiveInterviewIcon.png"
                }
                //占位Rectangle
                Rectangle {
                    width: parent.width * 0.04
                    height: parent.width * 0.08
                    color: "transparent"
                }
                Text {
                    y: parent.width * 0.10
                    text: "综合面试"
                    font.pointSize: 12 * fontSizeFactor
                    font.family: "MiSans"
                    color: "#0A1629"
                }
            }

            Text {
                x: parent.width * 0.08
                y: parent.width * 0.3
                text: "全真模拟面试系统"
                font.pointSize: 9 * fontSizeFactor
                font.family: "MiSans"
                color: "#7D8592"
            }

            // 开始按钮
            Rectangle {
                id: comprehensiveInterviewRect
                y: parent.height * 0.7
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width * 0.84
                height: parent.height * 0.2
                radius: 10
                color: "#FFFFFF"
                border.width: 1
                border.color: "#0A1629"

                Text {
                    anchors.centerIn: parent
                    text: "Kickoff <<----"
                    font.pointSize: 12 * fontSizeFactor
                    font.family: "MiSans"
                    color: "#0A1629"
                }

                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: {
                        comprehensiveInterviewRect.scale = 1.15
                    }
                    onExited: {
                        comprehensiveInterviewRect.scale = 1.0
                    }
                    onPressedChanged: {
                        FluRouter.navigate("/interview");
                        mainWindow.close();
                    }
                }
                // Q弹动画
                Behavior on scale {
                    PropertyAnimation {
                        duration: 200
                        easing.type: Easing.OutBounce
                    }
                }
            }
        }


        FluRectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "transparent"
            Layout.row: 1
            Layout.column: 1
        }

        FluRectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "transparent"
            Layout.row: 2
            Layout.column: 2
        }
    }
}
